<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="/webjars/bootstrap/3.3.7/css/bootstrap.min.css">
  <title>Document</title>
  <style>[v-cloak] {
    display: none
  }

  .chat {
    border: #eee 1px solid;
    width: 350px;
    height: 400px;
    border-radius: 20px;
    padding-top: 20px;
    background-color: #eee;
    margin-top: 10px;
  }

  .chat-box {
    height: 88%;
    overflow-y: scroll;
  }

  .chat-box div {
    border-radius: 8px;
    margin-bottom: 6px;
    min-height: 35px;
    border: 1px solid transparent;
    padding: 4px 6px;
    max-width: 90%;
    word-wrap: break-word;
  }

  .chat-left {
    position: absolute;
    background: white;
    margin-left: 11px;
    cursor: pointer;
  }

  .chat-right {
    position: absolute;
    background-color: #8bd28d;
    right: 11px;
  }

  .chat-input {
    display: inline-block;
    height: 12%;
    padding: 0 0 0 11px;
  }
  </style>
</head>
<body>
<div id="app" class="container" v-cloak>
  <div class="user-info">
    <div v-show="loginName">欢迎您,
      <span>{{loginName}}</span>
      <button class="btn btn-danger" @click="logout">注销</button>
    </div>
    <div v-show="!loginName" class="input-group">
      <input type="text" class="form-control" placeholder="用户名" v-model="inputName">
      <span class="input-group-btn" style="width: 20%">
        <button class="btn btn-primary" @click="login">登陆</button>
      </span>
    </div>
  </div>
  <div class="chat">
    <div class="chat-box">
      <div v-for="(chat,index) in chatList" style="position: relative;">
        <div class="clearfix">
          <div v-if="chat.type==1" class="chat-left" @click="atUser(chat.name)">{{chat.content}}</div>
          <div v-if="chat.type==2" class="chat-right">{{chat.content}}</div>
        </div>
      </div>
    </div>
    <div class="chat-input">
      <div class="input-group">
        <input class="form-control" v-model="msg.toUser" type="text" style="width: 26%;border-bottom-left-radius: 11px;"
               placeholder="@某人" :readonly="!loginName">
        <input class="form-control" v-model="msg.content" type="text" style="width: 74%" placeholder="您想说的话"
               :readonly="!loginName">
        <span class="input-group-btn" style="width: 20%">
          <button class="btn btn-primary" @click="sendMsg" style="border-bottom-right-radius: 11px;"
                  :disabled="!loginName">send</button>
        </span>
      </div>
    </div>
  </div>
</div>
<script src="/webjars/jquery/2.1.1/jquery.min.js"></script>
<script src="/webjars/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="/webjars/sockjs-client/1.1.2/sockjs.min.js"></script>
<script src="/webjars/vue/2.1.3/vue.min.js"></script>
<script src="/webjars/vue-resource/0.9.3/vue-resource.min.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      msg: {
        toUser: '',
        content: ''
      },
      socket: {},
      chatList: [],
      inputName: '',
      loginName: ''
    },
    mounted: function () {
      //加载WS
      this.initWs();
      //加载当前用户
      this.initUser();
    },
    methods: {
      atUser: function (atUser) {
        this.msg.toUser = atUser;
      },
      sendMsg: function () {
        this.$http.post('/send', this.msg).then(function (resp) {
          this.msg.content = '';
        });
      },
      login: function () {
        this.$http.get('/login/' + this.inputName).then(function (resp) {
          this.initUser();
          this.initWs();
        });
      },
      logout: function () {
        this.$http.get('/logout').then(function (resp) {
          this.initUser();
        });
      },
      initUser: function () {
        this.$http.get('/getUser').then(function (resp) {
          this.loginName = resp.body;
        });
      },
      initWs: function () {
        if (window['WebSocket']) {
          this.socket = new WebSocket("ws://localhost/chatSocket");
        } else {
          this.socket = new SockJS("http://localhost/chatSocket/socketjs");
        }
        this.socket.onopen = function (event) {
        }
        this.socket.onclose = function (event) {
        }
        this.socket.onmessage = function (event) {
          var msg = JSON.parse(event.data);
          if (msg.name == app.loginName) msg.type = 2;
          else msg.type = 1;
          app.chatList.push(msg);
          $(".chat-box")[0].scrollTop = $(".chat-box")[0].scrollHeight;
        }
      }
    }
  });
</script>
</body>
</html>